<script setup>
import { ref, watch } from 'vue'
const filterText = ref('')
const treeRef = ref()

defineProps({
  list: Array,
  title: String,
  span: {
    type: Number,
    default: 4

  }
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value)
}
watch(filterText, val => {
  treeRef.value.filter(val)
})
const emit = defineEmits(['getNodeData'])
const getNodeData = () => {
  emit('getNodeData', treeRef.value.currentNode.data)
}
</script>

<template>
  <el-col :span="span" class="left">
    <div class="top">
      <h4>{{ title }}</h4>
      <slot></slot>
    </div>
    <el-input class="search" v-model="filterText" placeholder="关键词搜索" clearable />
    <el-tree ref="treeRef" class="filter-tree" :props="{ children: 'children', label: 'name' }" :data="list"
      node-key="id" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
      @node-click="getNodeData">
    </el-tree>
  </el-col>
</template>

<style scoped lang="less">
.left {
  min-height: 80vh;
  border-right: 1px dashed #ccc;

  .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-right: 16px;

    h4 {
      margin: 8px 0px;
      padding-right: 16px;
    }

  }

  // p {
  //   margin-left: 20px;
  // }

  .search {
    padding: 10px 10px;
    width: 100%;
    border-radius: 10px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>